<template>
  <div class="lxr-page-short-rent" v-if="flag===true">
    <div class="lxr-content lxr-main">
      <aside class="lxr-page-aside">
        <div class="lxr-com-aside-panel-wrapper">
          <header>
            <h3>租车筛选</h3>
          </header>
          <div class="lxr-bd">
            <div class="lxr-com-short-rent-filter">
              <header>
                <h4>热租城市</h4>
                <div style="display: flex; align-items: center">
                  <el-popover placement="right" :width="650" trigger="click">
                    <template #reference>
                      <el-button style="margin-right: 3px;color: #00CF97;border: 0">更多城市</el-button>
                    </template>
                    <div style="width:100%;">
                      <div>
                        <div style="display: flex;margin-top: 32px" v-for="(val, key, i) in LetterCityList">
                          <el-button class="button" style="color: #00CF97"><strong>{{ key }}</strong></el-button>
                          <el-button v-for="city in val" ><a @click="cityChange(city.id)" :class="{'selected': selectedCity===city.id}">{{city.name}}</a></el-button>
                        </div>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </header>
              <div class="lxr-list">
                <div class="lxr-item" v-for="cityHot in cityHotArr">
                  <a @click="cityChange(cityHot.id)" :class="{'selected': selectedCity===cityHot.id}">{{cityHot.name}}</a>
                </div>
              </div>
              <header>
                <h4>热门品牌</h4>
                <div style="display: flex; align-items: center">
                  <el-popover placement="right" :width="650" trigger="click">
                    <template #reference>
                      <el-button style="margin-right: 3px;color: #00CF97;border: 0">更多品牌</el-button>
                    </template>
                    <div style="width:100%;">
                      <div>
                        <div style="display: flex;margin-top: 32px" v-for="(val, key, i) in LetterBrandList">
                          <el-button class="button" style="color: #00CF97"><strong>{{ key }}</strong></el-button>
                          <el-button v-for="brand in val" ><a @click="brandChange(brand.id)" :class="{'selected': selectedBrand===brand.id}">{{brand.name}}</a></el-button>
                        </div>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </header>
              <div class="lxr-list">
                <div class="lxr-item" v-for="brandHot in brandHotArr">
                  <a @click="brandChange(brandHot.id)" :class="{'selected': selectedBrand===brandHot.id}">{{brandHot.name}}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lxr-com-aside-panel-wrapper">
          <header>
            <h3>租车资讯</h3>
            <a href="https://shanghai.atzuche.com/news/310100-default" class="lxr-more">更多</a>
          </header>
          <div class="lxr-bd">
            <div class="list">
              <router-link :to="'/newsDetail/' + item.id"  class="news-item" v-for="item in HotNews" style="text-decoration: none">
                {{item.title}}
              </router-link>
            </div>
          </div>
        </div>

        <div class="lxr-com-aside-panel-wrapper">
          <header>
            <h3>租车推荐</h3>
            <a class="lxr-more">更多</a>
          </header>
          <div class="lxr-bd">
            <div class="lxr-com-short-rent-recomm">
              <div class="lxr-item"  v-for="vehicle in vehicleArr">
                <div class="lxr-thumb">
                  <span>{{vehicle.year}}年车龄</span><img :src="vehicle.imgs"
                                                   :alt="vehicle.name"></div>
                <div class="lxr-r"><h3>{{vehicle.brandInfo}}</h3><span class="lxr-tags">{{vehicle.plateNumber }}<!-- --> | <!-- -->{{ transmissionTypeFormatter(vehicle.transmissionType) }}
                  <!-- --> | <!-- --> {{ powerTypeFormatter(vehicle.powerType) }}</span>
                  <div class="lxr-rate"><span class="lxr-star"></span><span class="lxr-star"></span><span
                      class="lxr-star"></span><span
                      class="lxr-star"></span><span class="lxr-star"></span>
                    <p>{{vehicle.score}}<!-- --> 分</p></div>
                  <div class="lxr-price"><strong>{{ vehicle.dayRentPrice}}</strong><span>元/天</span></div>
                </div>
              </div>


            </div>
          </div>
        </div>
      </aside>
      <div class="lxr-mainbody">
        <div class="lxr-header">
          <h1>租车价格及评价</h1>
          <div class="lxr-router"><a href="/">首页</a><span>·</span>
            <a href="https://www.atzuche.com/city">全国租车</a><span>·</span><a><!-- --> 租车</a>
          </div>
        </div>
        <div class="lxr-banner">
          <a href="https://www.atzuche.com/signup?utm_source=seocity&amp;utm_medium=seocity&amp;utm_campaign=seocity&amp;utm_term=aa84ec947f0a72b161a8d27598eda21e"
             target="_blank"><img src="https://www.atzuche.com/static/media/banner.971329e4.png"/></a>
        </div>
        <div class="lxr-carlist">
          <div class="lxr-com-short-rent-caritem" v-for="vehicle in vehicleArr">
            <div class="lxr-thumb"><span>{{vehicle.year}}年车龄</span><img
                :src="vehicle.imgs" :alt="vehicle.name"></div>
            <div class="lxr-data">
              <header><h2>{{vehicle.brandInfo}}</h2>
                <div class="lxr-price">￥<strong>{{ vehicle.dayRentPrice}}</strong>/天</div>
              </header>
              <p class="lxr-info">{{ vehicle.plateNumber }}<!-- --> | <!-- -->{{ transmissionTypeFormatter(vehicle.transmissionType) }}<!-- --> |<!-- --> <!-- -->
                {{ powerTypeFormatter(vehicle.powerType) }}</p>
              <div class="lxr-rate"><span class="lxr-star"></span><span class="lxr-star"></span><span
                  class="lxr-star"></span><span
                  class="lxr-star"></span><span class="lxr-star"></span>
                <p>{{vehicle.score}}<!-- --> 分</p></div>
              <div class="lxr-tags"><p class="lxr-tag">{{ vehicle.vehicleTag }}</p>
                <p class="lxr-tag">信用双免</p></div>
              <div class="lxr-msglist">
                <div class="lxr-msg">{{ vehicle.vehicleEvaluationOne }}</div>
                <div class="lxr-msg">{{vehicle.vehicleEvaluationTwo}}</div>
              </div>
              <button class="lxr-booking" @click="toLongRentDetail(vehicle.id)">立即预定</button>
            </div>
          </div>
        </div>
        <!--    分页      -->
        <div style="margin:30px;float: right;">
          <!--layout="total(总数), sizes(每页总数), prev(上一页), pager(当前页), next(下一页), jumper(跳转页)"
           :pager-count="4" 表示显示4个页码
           :page-sizes="[5, 10, 15, 20]" 表示一共有几个"每页显示多少条"选项
           current-page当前页码 page-size当前页码的条数 total总条数 这三个变量需要和实际数据双向绑定
           :total="400" 表示总条数，需要双向绑定
           @size-change="handleSizeChange" 表示每页显示多少条改变时触发的事件
           @current-change="handleCurrentChange" 表示当前页码改变时触发的事件 -->
          <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[5, 10, 15, 20]"
              v-model:current-page="currentPage"
              v-model:page-size="currentSize"
              v-model:total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              style="color: #2fe5a2"
          />
        </div>
      </div>
    </div>
  </div>

</template>


<script  setup>

import {onMounted, ref} from "vue";
import request from '@/utils/request';
import {ElMessage} from "element-plus";
import qs from 'qs';
import router from "@/router";
import {useRoute} from "vue-router";


//热租城市-----------------------------------
const cityHotArr = ref([]);
const loadCityHot = ()=>{
  request.get('/city/selectHotCityList2').then((response)=>{
    if (response.code===200){
      cityHotArr.value = response.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//更多城市----------------------------


const LetterCityList = ref([]);
const getMoreCity = () => {
  let url = `/city/selectLetterCityList`;
  request.get(url).then((response) => {
    if (response.code === 200) {
      LetterCityList.value = response.data;
      console.log(response.data)
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}




//热租品牌-----------------------------------
const brandHotArr = ref([]);
const loadBrandHot = ()=>{
  request.get('/cr/brand/selectHot').then((response)=>{
    if (response.code===200){
      brandHotArr.value = response.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//全部品牌-----------------------------------
const LetterBrandList = ref([]);
const getMoreBrand = () => {
  let url = `/cr/brand/selectLetterBrandList`;
  request.get(url).then((response) => {
    if (response.code === 200) {
      LetterBrandList.value = response.data;
      console.log(response.data)
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//查车-----------------------------------

const vehicleArr = ref([]);
const searchVehicleForm = ref({brandId:'',cityId:''});
const selectedCity = ref()
const cityChange = (city)=>{
  if (selectedCity.value === city) {
    selectedCity.value = '';
    searchVehicleForm.value.cityId = '';
  } else {
    selectedCity.value = city;
    searchVehicleForm.value.cityId = city;
  }
  loadVehicle();
}

const selectedBrand = ref()
const brandChange = (brand)=>{
  if (selectedBrand.value === brand) {
    selectedBrand.value = '';
    searchVehicleForm.value.brandId = '';
  } else {
    selectedBrand.value = brand;
    searchVehicleForm.value.brandId = brand;
  }
  loadVehicle();
}

const loadVehicle = ()=>{
  //第一步:查询数据之前需要把当前页码以及每页显示多少条传给服务器
  searchVehicleForm.value.pageSize = currentSize.value;
  searchVehicleForm.value.pageNum = currentPage.value;

  let data = qs.stringify(searchVehicleForm.value);
  request.get('/vehicle/dayRentVehicleInfo/dayRentVehicleInfoQuery?'+data).then((response)=>{
    if (response.code==200){
      console.log('查看PageData返回的数据:')
      console.log(response.data)
      //vehicleArr.value = response.data;
      console.log(response.data.list)
      vehicleArr.value = response.data.list;//所以要多加一层list
      total.value = response.data.total;//设置总条目数
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref(100);
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  loadVehicle();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  loadVehicle();
}



const toLongRentDetail=(id)=>{
  router.push({
    path: '/long_rent/detail',
    query: { id: id }
  })
}

const flag = ref(false)
onMounted(() => {
  searchVehicleForm.value.brandId = useRoute().query.brandId
  loadCityHot();
  loadBrandHot();
  loadVehicle();
  loadAllDictOptions();
  getMoreCity();
  getMoreBrand()
  getHotNews();
  flag.value=true
})
//字典数值
const transmissionTypeOption =ref();
const powerTypeOption =ref();
//加载字典项----------------------------------------------------------------------
const loadAllDictOptions = ()=>{
  loadDictOptions(powerTypeOption,5);
  loadDictOptions(transmissionTypeOption,9);
}
//formatter----------------------------------------------------------------------
const transmissionTypeFormatter = (val)=>{
  for(let index in transmissionTypeOption.value){
    if(transmissionTypeOption.value[index].value==val){
      val = transmissionTypeOption.value[index].label
      return val
    }
  }
  return val
}

const powerTypeFormatter = (val)=>{
  for(let index in powerTypeOption.value){
    if(powerTypeOption.value[index].value==val){
      val = powerTypeOption.value[index].label
      return val
    }
  }
  return val
}


//资讯
let id = null;
const HotNews = ref([]);
const newInfoList = ref({});
const getHotNews = () => {
  let url = `/v1/news/hot`;
  request.get(url).then((response) => {
    if (response.code === 200) {
      console.log(response.data);
      HotNews.value = response.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
};
</script>

<style scoped>

.lxr-page-short-rent {
  min-width: 1024px;
  background-color: #f4f7f9;
  color: #3c3c5a;
  padding: 24px 0;
}

.lxr-page-short-rent>.lxr-content {
  display: -ms-flexbox;
  display: flex;
}

.lxr-main {
  width: 1024px;
  margin: 0 auto;
}

.lxr-page-short-rent .lxr-page-aside {
  width: 320px;
  margin-right: 16px;
}

.lxr-com-aside-panel-wrapper {
  display: block;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 16px;
  position: relative;
}

.lxr-com-aside-panel-wrapper > header {
  background-image: linear-gradient(180deg, rgba(75, 255, 213, .1), #fff);
  padding: 15px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.lxr-com-aside-panel-wrapper > header h3 {
  display: block;
  width: 100%;
  height: 27px;
  font-size: 18px;
  color: #3c3c5a;
  flex: 1 1;
  margin: 0;
}

.lxr-com-aside-panel-wrapper > .lxr-bd {
  padding: 0 20px 15px;
}

.lxr-com-short-rent-filter > header {
  display: flex;
  align-items: center;
  padding: 10px 0;
  position: relative;
}

.lxr-com-short-rent-filter > header h4 {
  flex: 1 1;
  display: block;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
}

.lxr-com-short-rent-filter > header a {
  color: #00cf97;
  font-size: 12px;
  display: block;
  background-image: url();
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: auto 8px;
  padding-right: 12px;
  cursor: pointer;
}

.lxr-com-short-rent-filter .lxr-list {
  display: flex;
  flex-wrap: wrap;
  margin-right: -8px;
  margin-bottom: 8px;
}

.lxr-com-short-rent-filter .lxr-list .lxr-item {
  display: block;
  padding: 4px 6px 4px 0;
}


.lxr-com-short-rent-filter .lxr-list a {
  border: 1px solid rgba(60, 60, 90, .1);
  width: 64px;
  height: 32px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
}

.lxr-com-aside-panel-wrapper > header .lxr-more {
  display: block;
  font-size: 12px;
  color: #00cf97;
  background-image: url();
  background-repeat: no-repeat;
  background-position: 100%;
  background-size: auto 8px;
  padding-right: 12px;
  cursor: pointer;
  width: 30px;
}

.lxr-com-short-rent-news .lxr-news-item {
  display: flex;
  color: rgba(60, 60, 90, .6);
  font-size: 12px;
  margin-bottom: 15px;
  background: url() 0 no-repeat;
  background-size: 4px auto;
  padding-left: 10px;
}

.lxr-com-short-rent-news .lxr-news-item .lxr-p {
  overflow: hidden;
  white-space: nowrap;
  max-width: 80%;
}

.lxr-com-short-rent-news .lxr-news-item .lxr-dot {
  display: block;
  width: 100%;
  flex: 1 1;
  background: url() 0 repeat-x;
  background-size: 4px auto;
  margin: 0 10px;
}

.lxr-com-short-rent-qa .lxr-item {
  margin-bottom: 15px;
}

.lxr-com-short-rent-qa .lxr-item h3 {
  font-size: 13px;
  font-weight: 400;
  background: url() 0 no-repeat;
  background-size: 16px 16px;
  padding-left: 24px;
  margin-top: 0;
  margin-bottom: 8px;
}

.lxr-com-short-rent-qa .lxr-item p {
  font-size: 12px;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  background: url() 0 0 no-repeat;
  background-size: 16px 16px;
  padding-left: 24px;
  color: rgba(60, 60, 90, .6);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


.lxr-com-short-rent-recomm .lxr-item {
  display: flex;
  margin-bottom: 10px;
}

.lxr-com-short-rent-recomm .lxr-item .lxr-thumb {
  margin-right: 10px;
  position: relative;
  width: 128px;
  height: 90px;
  overflow: hidden;
  border-radius: 5px;
}


.lxr-com-short-rent-recomm .lxr-item .lxr-thumb span {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 12px;
  color: #fff;
  padding: 0 5px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .7) 29.17%, transparent);
}

.lxr-com-short-rent-recomm .lxr-item .lxr-thumb img {
  display: block;
  width: 128px;
  height: 90px;
  border-radius: 5px;
}


.lxr-com-short-rent-recomm .lxr-item .lxr-r {
  flex: 1 1;
  overflow: hidden;
}

.lxr-com-short-rent-recomm .lxr-item .lxr-r h3 {
  font-size: 14px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
}

.lxr-com-short-rent-recomm .lxr-item .lxr-r .lxr-tags {
  font-size: 12px;
  color: #3c3c5a;
  opacity: .6;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
}


.lxr-com-short-rent-recomm .lxr-item .lxr-r .lxr-rate {
  display: flex;
  align-items: center;
}

.lxr-com-short-rent-recomm .lxr-item .lxr-r .lxr-rate span {
  display: block;
  background-image: url();
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 13px;
  height: 13px;
  margin-top: -4px;
  margin-right: 3px;
}

.lxr-com-short-rent-recomm .lxr-item .lxr-r .lxr-rate p {
  display: block;
  font-size: 12px;
  color: rgba(60, 60, 90, .8);
  margin: 0;
}

.lxr-com-short-rent-recomm .lxr-item .lxr-price {
  display: flex;
  font-size: 12px;
  align-items: baseline;
}

.lxr-com-short-rent-recomm .lxr-item .lxr-price strong {
  display: block;
  font-size: 15px;
  font-weight: 400;
}

.lxr-mainbody > .lxr-header::after {
  content: "";
  display: block;
  position: absolute;
  left: 20px;
  bottom: 0;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background-color: #00cf97;
}

.lxr-page-short-rent .lxr-mainbody > .lxr-header h1 {
  display: block;
  color: #3c3c5a;
  font-size: 18px;
  flex: 1 1;
}

.lxr-mainbody > .lxr-header .lxr-router {
  display: flex;
  align-items: center;
  color: #3c3c5a;
  opacity: .6;
}


.lxr-page-short-rent .lxr-mainbody > .lxr-banner img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

.lxr-page-short-rent .lxr-mainbody {
  flex: 1 1;
}


.lxr-page-short-rent .lxr-mainbody>.lxr-header {
  display: flex;
  background: #fff;
  margin-bottom: 16px;
  border-radius: 10px;
  padding: 0 20px;
  height: 56px;
  position: relative;
  align-items: center;
}

.lxr-page-short-rent .lxr-mainbody > .lxr-header .lxr-router a, .lxr-page-short-rent .lxr-mainbody > .lxr-header .lxr-router p {
  display: block;
  font-size: 12px;
}

.lxr-page-short-rent .lxr-mainbody > .lxr-header .lxr-router span {
  display: block;
  padding: 0 5px;
}

.lxr-mainbody .lxr-carlist {
  padding-bottom: 10px;
}

.lxr-com-short-rent-caritem {
  background-color: #fff;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 8px;
  display: flex;
}

.lxr-com-short-rent-caritem .lxr-thumb {
  display: block;
  width: 190px;
  height: 156px;
  border-radius: 6px;
  background-color: #fafafa;
  margin-right: 16px;
  overflow: hidden;
  position: relative;
}

.lxr-com-short-rent-caritem .lxr-thumb span {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 12px;
  color: #fff;
  padding: 0 5px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .7) 29.17%, transparent);
}

.lxr-com-short-rent-caritem .lxr-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lxr-com-short-rent-caritem .lxr-data {
  flex: 1 1;
  position: relative;
}

.lxr-com-short-rent-caritem .lxr-data header {
  display: flex;
}

.lxr-com-short-rent-caritem .lxr-data header h2 {
  flex: 1 1;
  margin: 0;
}

.lxr-com-short-rent-caritem .lxr-data header .lxr-price {
  display: flex;
  font-size: 12px;
  align-items: baseline;
}

.lxr-com-short-rent-caritem .lxr-data header .lxr-price strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
}

.lxr-com-short-rent-caritem .lxr-data .lxr-info {
  display: block;
  font-size: 12px;
  color: rgba(60, 60, 90, .6);
  margin-top: 0;
  margin-bottom: 2px;
}


.lxr-com-short-rent-caritem .lxr-data .lxr-rate {
  display: flex;
  width: 450px;
  height: 18px;
  align-items: center;
  margin-bottom: 4px;
}

.lxr-com-short-rent-caritem .lxr-data .lxr-rate span {
  display: block;
  background-image: url();
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  width: 13px;
  height: 13px;
  margin-top: -4px;
  margin-right: 3px;
}

.lxr-com-short-rent-caritem .lxr-data .lxr-rate p {
  display: block;
  font-size: 12px;
  color: rgba(60, 60, 90, .8);
  margin: 0;
}

.lxr-com-short-rent-caritem .lxr-data .lxr-tags {
  display: flex;
  margin-bottom: 6px;
}

.lxr-com-short-rent-caritem .lxr-data .lxr-tags .lxr-tag {
  display: block;
  border: 1px solid rgba(191, 120, 44, .2);
  color: #bf782c;
  margin-top: 0;
  margin-right: 4px;
  margin-bottom: 0;
  border-radius: 4px;
  padding: 2px 4px;
  line-height: 1;
  font-size: 12px;
}


.lxr-com-short-rent-caritem .lxr-data .lxr-msglist {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lxr-com-short-rent-caritem .lxr-data .lxr-msglist .lxr-msg {
  background-color: rgba(44, 155, 142, .05);
  border-radius: 50px;
  margin-bottom: 4px;
  padding: 4px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 340px;
  font-size: 12px;
  color: #2c9b8e;
}

.lxr-com-short-rent-caritem .lxr-data .lxr-booking {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 88px;
  height: 32px;
  background-color: #00cf97;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 44px;
  cursor: pointer;
}

button {
  background-color: #fff;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
}

a, a:hover {
  color: #666;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  text-decoration: none;
}

.lxr-com-short-rent-filter .lxr-list .selected {
  color: #00bc93;
  border: 1px solid #00bc93;
}

a.news-item {
  display: -ms-flexbox;
  display: flex;
  color: #666;
  font-size: 12px;
  margin-bottom: 15px;
  background: url() 0 no-repeat;
  background-size: 4px auto;
  padding-left: 10px;
}


 .news-item:hover{
  color: #00bc93;
}
 .news-item:last-child {
  margin-bottom: 0;
}
 .news-item .p {
  overflow: hidden;
  white-space: nowrap;
  max-width: 80%;
}
 .news-item .dot {
  display: block;
  width: 100%;
  -ms-flex: 1 1;
  flex: 1 1;
  background: url() 0 repeat-x;
  background-size: 4px auto;
  margin: 0 10px;
}

</style>

<style>
.lxr-pagination .el-pagination.is-background .btn-next.is-active,
.lxr-pagination .el-pagination.is-background .btn-prev.is-active,
.lxr-pagination .el-pagination.is-background .el-pager li.is-active {
  background-color: #00bc93;
}
</style>
